


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
 <!DOCTYPE html>
  <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title></title>
   <style>
          .hide{
            display: none;
         }
          .pg-header{
             height: 48px;
            background-color: black;
            color: #dddddd;
              position: fixed;
              top:0;
             right: 0;
          left: 0;
      }
        .pg-body0{
              position: fixed;
              left: 0;
           top: 0;
         right: 0;
            bottom: 0;
              background-color: #dddddd;
              overflow: auto
 
        }
       .pg-h1{
              font-size: 18px;
              line-height: 48px;
            margin-left: 50px;
            float: left;
         }
        .pg-h2{
          font-size: 14px;
            line-height: 48px;
              float: right;
              margin-right: 50px;
          }
         .pg-body{
             width: 1100px;
             margin: 0 auto;
              /*height: 5000px;*/
             margin-top: 60px;
       }
          .pg-left{
             border: 1px solid #2459a2;
           width: 200px;
            float: left;
            background-color: #DFE1E8 ;
       }
         .pg-b3{
             height: 35px;
             color: #0309f9;
             font-weight: bold;
            line-height: 35px;
              margin: 5px;
              margin-left: 30px;
             font-size: 18px;
         }
        .pg-b4{
             font-family: "Arial", "Microsoft YaHei", "微软雅黑";
         margin: 4px;
            margin-left: 55px;
              font-size: 16px;
         }
         .pg-b4:hover{
             color: red;
          }
         .pg-right{
             border:1px solid #2459a2;
              height: 100%;
              margin-left: 25px;
           width: 800px;
          font-size: 15px;
             color: #333333;
            float: left;
             background-color: #DFE1E8 ;
 
       }
         .pg-c1{
             width: 100%;
              /*background-color: #dddddd;*/
           margin: 25px;
  
       }
         .pg-c2{
             display: inline-block;
             padding: 0 10px 0 10px;
         /*color: white;*/
          line-height:38px ;
         }
         .change{
             line-height: 36px;
             border: 1px solid #2459a2;
              color: #2459a2;
              font-weight: bold;
}
   .pg-r1{
            line-height: 26px;
             width: 50px;
             margin-right: 15px;
       }
         .c1{
             position: fixed;
          left: 0;
            top: 0;
           right: 0;
             bottom: 0;
           background-color: black;
             opacity: 0.6;
            z-index: 9;
         }
         .c2{
             width: 500px;
            height: 400px;
             background-color: white;
           position: fixed;
             left: 50%;
             top: 50%;
            margin-left: -250px;
             margin-top: -200px;
             z-index: 10;
           text-align: center;
        }
    </style>
 </head>
 <body>
    <div class="pg-body0">
       <div class="pg-header">
        <div class="pg-h1">
           后台管理系统
         </div>
         <div class="pg-h2">
          退出
      </div>
        <div class="pg-h2">
           欢迎XX用户
         </div>
        </div>
        <div class="pg-body">
                 <div class="pg-left">
                    <div class="pg-b2">
                        <div id="i1" class="pg-b3" onclick="ChangeMenu('i1');">客户管理</div>
              
                    </div>
                   <div class="pg-b2">
                     <div id="i2" class="pg-b3" onclick="ChangeMenu('i2');">菜品管理</div>
              
                     </div>
               <div class="pg-b2">
                        <div id="i3" class="pg-b3" onclick="ChangeMenu('i3');">菜品类别管理</div>
                
                    </div>
                     <div class="pg-b2">
                        <div id="i4" class="pg-b3" onclick="ChangeMenu('i4');">餐厅管理</div>
                  
                    </div>
              
               
          
               
                 </div>
 
               <div class="pg-right">
                 
                    <div class="pg-c1" style="height: 38px;line-height: 38px">
                         <input type="text" style="line-height: 20px;width: 180px">
                         <input type="submit" value="搜索" style="height: 26px">
                    </div>

                   <div class="pg-c1">
                         <input class="pg-r1" type="button" value="删除" onclick="<a href="/Cuisine/deleteCuisine.do?id=${lb.id}" onclick="return del()">" />
                         <input class="pg-r1" type="button" value="全选" onclick="ChooseAll();" />
                      <input class="pg-r1" type="button" value="取消" onclick="CancleAll();" />
                         <input class="pg-r1" type="button" value="反选" onclick="ReverseAll();" />
                </div>
                    <div class="pg-c1">
                         <table border="1" style="border: 1px solid #2459a2">
                            <thead>
                                 <tr>
                                   <th></th>
                                 
                                   <th>客户名</th>
                                  <th>密码</th>
                                  <th>真实姓名</th>
                                  <th>性别</th>
                                    <th>年龄</th>
                                 <th>卡号</th>
                                   <th>地址</th>
                                   <th>联系方式</th>
                                   <th>邮箱</th>
                               </tr>
                           </thead>
                          <tbody id="tb">
                                 
                             </tbody>
                        </table>
                     </div>
                    <!-- 遮罩层开始 -->
                     <div id="r1" class="c1 hide"></div>
                    <!-- 遮罩层结束 -->
                     <!-- 弹出框开始 -->
                    <div id="r2" class="c2 hide">
                        <p><input type="text" style="line-height: 20px;width: 180px;margin-top: 100px" /></p>
                         <p><input type="text" style="line-height: 20px;width: 180px" /></p>
                         <p>
                             <input style="height: 26px" type="button" value="取消" onclick="HideModel();"/>
                       <input style="height: 26px" type="button" value="确定"/>
                        </p>
                 </div>
                    <!-- 弹出框结束 -->
                   <div style="clear: both;"></div>
                </div>
                 <div style="clear: both;"></div>
            </div>
        <div onclick="go();" style="width: 70px;height: 25px;background-color: #178fe6;color: white;
        position: fixed;
         bottom:20px;
         right: 20px;
         ">返回顶部</div>
     </div>
 
    <script>
        function ChangeMenu(nid){
 //            console.log(nid)
             var current_header = document.getElementById(nid);
 //            console.log(current_header)
             var item_list = current_header.parentElement.parentElement.children;
 //            console.log(item_list)
             for(var i=0;i<item_list.length;i++){
                 var current_item = item_list[i];
 //                console.log(current_item.children[1])
                 current_item.children[1].classList.add('hide');
             }
             current_header.nextElementSibling.classList.remove('hide');
         }
         function change(num) {
             var l1 = document.getElementById(num);
             console.log(l1)
             var ul = l1.parentElement;
            console.log(ul)
            var l1_list = ul.children;
            for (var i=0;i<l1_list.length;i++){
             var current = l1_list[i];
               current.classList.remove('change')
        }
            l1.classList.add('change')
         }

  function del() {
    if (confirm("确认删除？")) {
      return true;
    } else {
      return false;
    }
  }
     function HideModel(){
           console.log(11)
           document.getElementById('r1').classList.add('hide');
          document.getElementById('r2').classList.add('hide');
         }
         function ChooseAll(){
            var tbody = document.getElementById('tb');
         // 获取所有的tr
            var tr_list = tbody.children;
           for(var i=0;i<tr_list.length;i++){
                // 循环所有的tr，current_tr
                 var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
               checkbox.checked = true;

          }
       }

        function CancleAll(){
            var tbody = document.getElementById('tb');
           // 获取所有的tr
           var tr_list = tbody.children;
            for(var i=0;i<tr_list.length;i++){
              // 循环所有的tr，current_tr
            var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                 checkbox.checked = false;
 
           }
         }

        function ReverseAll(){
           var tbody = document.getElementById('tb');
             // 获取所有的tr
            var tr_list = tbody.children;
             for(var i=0;i<tr_list.length;i++){
                 // 循环所有的tr，current_tr
             var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                 if(checkbox.checked){checkbox.checked = false;}else{checkbox.checked = true;}}}
         function go(){
             console.log(1111);
             document.body.scrollTop = 0;
        }
 
     </script>
 </body>
 </html>